<template>
  <view class="pop-refund">
    <view class="pop-refund_title">请取消原因</view>
    <view v-for="(item, index) in reasonList" :key="index" class="pop-refund_item" @click="handleTriggerSelect(index)">
      <block v-if="item.name === '其他'">
        <view class="checkbox" :class="item.selected ? 'selected' : ''">
          <uni-icons class="selected-icon" v-if="item.selected" type="checkmarkempty" size="28rpx" color="white"></uni-icons>
        </view>
        <view class="flex">
          <view>其他</view>
          <input type="text" placeholder="请输入" class="pop-refund_item_input" v-model="otherReason" />
        </view>
      </block>
      <block v-else>
        <view class="checkbox" :class="item.selected ? 'selected' : ''">
          <uni-icons class="selected-icon" v-if="item.selected" type="checkmarkempty" size="28rpx" color="white"></uni-icons>
        </view>
        <view> {{ item.name }} </view>
      </block>
    </view>

    <view class="pop-refund_bottom">
      <view class="pop-refund_bottom_left" @click="close">取消</view>
      <view class="pop-refund_bottom_right" @click="submit">确认</view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
      default: {},
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      reasonList: [
        { name: '计划有变没时间消费', selected: false },
        { name: '买多了/买错了', selected: false },
        { name: '担心安全问题(天气等)', selected: false },
        { name: '后悔了，不想要了', selected: false },
        { name: '其他平台/店里活动更优惠', selected: false },
        { name: '其他', selected: false },
      ],
      otherReason: '',
    }
  },
  watch: {},
  created() {},
  methods: {
    handleTriggerSelect(index) {
      const _index = this.reasonList.findIndex(item => item.selected)
      if (!~_index) {
        this.reasonList[index].selected = true
      } else if (_index !== index) {
        this.reasonList[_index].selected = false
        this.reasonList[index].selected = true
      }
    },
    close() {
      this.$emit('close')
    },
    submit() {
      const _index = this.reasonList.findIndex(item => item.selected)
      if (!~_index) {
        return this.uniShowToast('请先选择退款原因')
      }
      const reasonItem = this.reasonList[_index]
      let currentReason = reasonItem.name === '其他' ? this.otherReason : reasonItem.name
      this.$emit('submit', currentReason)
      this.otherReason = ''
      this.reasonList = this.reasonList.map(item => {
        return { ...item, selected: false }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.pop-refund {
  padding: 20rpx;
  border-radius: 10rpx;
  background-color: #f6f6f6;
  &_title {
    text-align: center;
    font-size: 30rpx;
    font-weight: bold;
  }
  &_item {
    display: flex;
    padding: 10rpx 0;
    &_input {
      background-color: white;
      padding: 5rpx;
      margin-left: 5rpx;
    }
  }
  &_bottom {
    display: flex;
    height: 60rpx;
    line-height: 60rpx;
    border-top: 1rpx solid #e8e8e8;
    &_left {
      color: #ffb300;
      text-align: center;
      border-right: 1rpx solid #e8e8e8;
      flex: 1;
    }
    &_right {
      color: #ffb300;
      text-align: center;
      flex: 1;
    }
  }
}
.checkbox {
  display: flex;
  justify-items: center;
  align-items: center;
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  margin: 0 24rpx 0 8rpx;

  &.selected {
    border: 2rpx solid transparent;
    background: linear-gradient(to left, #ff8f00, #ffb300);
    color: white;
    .selected-icon {
      margin: 2rpx;
      color: #fff !important;
    }
  }
}
</style>
